<!--
* @author wn
* @date 2023/03/15 13:48:59
* @description: 工艺流程 子表
!-->
<template>
	<a-card :bordered="false" :md="24" :sm="24" :bodyStyle="{ padding: 0 }">
		<!-- table区域-begin -->
		<section>
			<div class="table-operator ant-alert ant-alert-info">
				<div>
					<a @click="handleSubAdd"><Icon :icon="iPlus" />新增</a>
					<a-divider type="vertical" />
					<a
						@click="handleModify"
						:disabled="1 !== selectedRowKeys.length || this.loading"
					>
						<Icon :icon="iEdit" />编辑
					</a>
					<a-divider type="vertical" />
					<a
						@click="handleRecordDelete('PROCESS_FLOW_LINE', false)"
						:disabled="1 !== selectedRowKeys.length || this.loading"
					>
						<Icon :icon="iDelete" />删除
					</a>
					<a-divider type="vertical" />
				</div>
				<!-- Popover 气泡卡片 -->
				<span class="float-right">
					<a-popover title="自定义列" trigger="click" placement="leftBottom">
						<template #content>
							<!-- :defaultValue="settingColumns"
							-->

							<a-checkbox-group
								v-model:value="settingColumns"
								@change="onColSettingsChange"
							>
								<a-row style="width: 400px">
									<template v-for="item in defColumns" :key="item.title">
										<a-col
											:span="12"
											v-if="
												item.key !== 'rowIndex' && item.dataIndex !== 'action'
											"
										>
											<a-checkbox :value="item.dataIndex">
												<ellipsis :value="item.title" />
											</a-checkbox>
										</a-col>
									</template>
								</a-row>
							</a-checkbox-group>
						</template>
						<a><Icon :icon="iSetting" />设置</a>
					</a-popover>
				</span>
			</div>
			<!-- table -->
			<a-table
				size="middle"
				bordered
				rowKey="ord_line_id"
				:columns="columns"
				:dataSource="dataSource"
				:pagination="pagination"
				:loading="loading"
				:scroll="{ x: scrollX, y: scrollY }"
				:rowSelection="{
					selectedRowKeys: selectedRowKeys,
					onChange: onSelectChange,
					getCheckboxProps: getCheckboxProps,
				}"
				@change="handleTableChange"
				:customRow="customRow"
			>
				<!-- 固定头和列 -->
				<template #bodyCell="{ index, record, column }">
					<template v-if="column.dataIndex === 'action'">
						<span>
							<a @click="handleEdit(record)">编辑</a>
							<a-divider type="vertical" />
							<a-dropdown>
								<a class="ant-dropdown-link">
									更多
									<Icon :icon="DownOutlined" />
								</a>
								<template #overlay>
									<a-menu>
										<a-menu-item>
											<a href="javascript:;" @click="handleDetail(record)">
												详情
											</a>
										</a-menu-item>

										<a-menu-item>
											<a-popconfirm
												title="确定删除吗?"
												@confirm="
													() =>
														handleDelete('Process_Flow', true, record.ord_id)
												"
											>
												<a>删除</a>
											</a-popconfirm>
										</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</span>
					</template>
					<!-- # 索引 + 1 -->
					<template v-else-if="column.title === '序号'">
						{{ index + 1 }}</template
					>
					<!-- 自动换行 -->
					<template v-else-if="column.key === 'wrapStandardText'">
						<span :style="{ wraptext: true }">
							{{ record[column.dataIndex] }}
						</span>
					</template>
					<!-- 字符串超长截取省略号显示, 在tooltip里面显示全部信息 -->
					<template v-else>
						<ellipsis :value="record[column.dataIndex] || ''" />
					</template>
				</template>
			</a-table>
		</section>
		<!-- table区域-end -->

		<!-- 表单区域 -->
		<!-- 		<process_FlowSUB-modal
			:orderDataID="orderID"
			ref="modalForm"
			@ok="modalFormOk"
		></process_FlowSUB-modal> -->
	</a-card>
</template>
<script setup>
import { usePagination } from 'vue-request'
import { Icon } from '@/antd/icons'
import Ellipsis from '@/components/tools/Ellipsis'
import { reactive, ref, computed } from 'vue'
import { selectSubListData } from '@/api/table'

// 指定滚动区域的宽和高 number
const scrollX = ref(document.body.clientWidth - 200) // ant-header-side-opened
const scrollY = ref(document.body.clientHeight - 383) // 表格竖向滚动条,383是页面其他元素的高度

// Icon
const iPlus = ref('PlusOutlined')
const iEdit = ref('EditOutlined ')
const iDelete = ref('DeleteOutlined')
const iSetting = ref('SettingOutlined')

// 选择框的默认属性配置 默认选中第一行
const getCheckboxProps = () => {}

// 选中的 行
const selectedRowKeys = reactive([])
// table选中 records
const selectionRows = ref([])
// 选中触发的回调
const onSelectChange = (keys, rows) => {
	selectedRowKeys.value = keys
	selectionRows.value = rows
	console.log(keys, rows)
}

// 自定义列设置 -- 气泡卡片 + table 表头
const defColumns = ref([
	{
		title: '序号',
		align: 'center',
		dataIndex: 'int06',
		width: 80,
	},
	{
		title: '工序编码',
		align: 'center',
		dataIndex: 'rref05_no',
		width: 200,
		ellipsis: true,
	},
	{
		title: '工序',
		align: 'center',
		dataIndex: 'rref05_name',
		width: 200,
		ellipsis: true,
	},
	{
		key: 'wrapStandardText',
		title: '默认指令',
		align: 'center',
		dataIndex: 'c08',
		width: 300,
	},
	{
		key: 'wrapStandardText',
		title: '配方编码',
		align: 'center',
		dataIndex: 'rref03_no',
		width: 160,
	},
	{
		key: 'wrapStandardText',
		title: '配方',
		align: 'center',
		dataIndex: 'rref03_name',
		width: 300,
	},
	{
		title: '上料(Y/N)',
		align: 'center',
		dataIndex: 'c03',
		width: 200,
		ellipsis: true,
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		fixed: 'right',
		width: 170,
	},
])
// 表头  默认全部有 action在最后
const columns = ref([...defColumns.value])
// 动态列设置  显示--item.title  value:item.dataIndex
const settingColumns = ref(
	defColumns.value.filter(v => v.dataIndex !== 'action').map(v => v.dataIndex)
)
// 列设置更改事件--value:item.dataIndex
// settingColumns 要做 持久化 session 取代 checkedValue
const onColSettingsChange = checkedValue => {
	// 筛选 选中的 columns
	const filterArr = defColumns.value.filter(item =>
		checkedValue.includes(item.dataIndex)
	)
	// action 列头
	const action = defColumns.value[defColumns.value.length - 1]
	// 修改 columns
	columns.value = [...filterArr, action]
}
// 设置行属性
// eslint-disable-next-line no-unused-vars
const customRow = record => {
	return {
		onClick() {
			/**
			 * 点击行 选中 or 取消
			 * 1 没有选中  直接添加
			 * 2 有选中 是同一行   取消
			 * 3 有选中 不是同一行  选中点击的行
			 */
			if (!selectedRowKeys.value.length) {
				selectedRowKeys.value.push(record.ord_id)
			} else if (selectedRowKeys.value.includes(record.ord_id)) {
				selectedRowKeys.value = []
			} else {
				selectedRowKeys.value = [record.ord_id]
			}
		},
	}
}

// API 所需对象  改变 mainDataID
const parameter = {
	column: 'created_date',
	field:
		'ord_id,int06,rref05_no,rref05,rref05_name,c08,rref03_no,rref03,rref03_name,c03,action',
	mainDataID: '2390345',
	order: 'desc',
	pageNo: '1',
	pageSize: '5',
}
const selectedKey = ref('')
// 父表选中 获取 子表 数据
const dataSource = ref([])
const onSelectSubListData = async selectedRowKey => {
	selectedKey.value = selectedRowKey
	parameter.mainDataID = selectedRowKey
	const res = await run(parameter)
	dataSource.value = res.data
}

const { run, loading, current, pageSize, total } = usePagination(
	() => selectSubListData(selectedKey.value, parameter),
	{
		defaultParams: [parameter],
		formatResult: ({ data, total }) => ({ data, total }),
		pagination: {
			currentKey: 'pageNo',
			pageSizeKey: 'pageSize',
		},
	}
)
// 分页器
// usePagination
const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value,
	pageSizeOptions: [
		'5',
		'10',
		'15',
		'20',
		'25',
		'30',
		'50',
		'100',
		'150',
		'200',
		'300',
		'500',
	],
	showTotal: (total, range) => {
		return range[0] + '-' + range[1] + ' 共' + total + '条'
	},
	showQuickJumper: true,
	showSizeChanger: true,
	serverQuery: true,
}))

// 分页、排序、筛选变化时触发 @change="handleTableChange" 参考远程加载数据
const handleTableChange = (pag, filters, sorter) =>
	run({
		pageSize: pag.pageSize,
		pageNo: pag?.current,

		sortField: sorter.field,
		sortOrder: sorter.order,
		...filters,
	})

defineExpose({ onSelectSubListData })
</script>
<style scoped lang="less">
// 新增  复制
.table-operator {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 6px 0;
}
</style>
